@font-face {
  font-family: "iconfont";
  /* Project id  */
  src: url("iconfont.ttf?t=1641026263139") format("truetype");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-xinlangweibo:before {
  content: "\f01af";
}

.icon-facebook:before {
  content: "\e6f3";
}

.icon-lingdang:before {
  content: "\e8c0";
}

.icon-zhifeiji:before {
  content: "\e70e";
}

.icon-twitter-fill:before {
  content: "\e63d";
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
}

body {
  background-color: #161535;
  overflow-y: auto;
  overflow-x: hidden;
}

img {
  width: 100%;
}

ul li {
  list-style: none;
}

.web header {
  width: 100%;
  background-color: #090428;
}

.web header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25vw 1.93vw;
  font-size: 1vw;
}

.web header nav .navLeft {
  display: flex;
}

.web header nav .navLeft .logo {
  width: 6vw;
  height: 1.56vw;
  overflow: hidden;
}

.web header nav .navLeft ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.web header nav .navLeft ul li a {
  color: #fff;
  padding: 0.4vw 1.5vw;
}

.web header nav .navLeft ul li .active {
  color: #f3b652;
}

.web header nav .navRight {
  display: flex;
}

.web header nav .navRight .navLink a {
  color: #a2a2a2;
  padding: 0.4vw 1.5vw;
}

.web header nav .navRight select {
  border: none;
  background-color: #090428;
  color: #a2a2a2;
  outline: none;
}

.web main {
  padding-bottom: 3.49vw;
}

.web main .slideBox {
  width: 100%;
  height: 43.89vw;
  background-color: #222222;
}

.web main .slideBox .sildeCenter {
  position: relative;
  width: 87.29vw;
  height: 100%;
  margin: 0 auto;
}

.web main .slideBox .sildeCenter .sildeTop {
  width: 60vw;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.web main .slideBox .sildeCenter .sildeTop .tryGame {
  position: relative;
  width: 17.92vw;
  height: 28.82vw;
  background: url(../img/shou.png) no-repeat;
  background-size: 17.92vw 28.82vw;
  color: #a1a1a1;
  font-size: 1.25vw;
}

.web main .slideBox .sildeCenter .sildeTop .tryGame p {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 18vw;
  transform: translateX(-50%) scale(0);
  width: 11vw;
  opacity: 0;
}

.web main .slideBox .sildeCenter .sildeTop .more {
  width: 20.9vw;
  color: #2ce4ca;
}

.web main .slideBox .sildeCenter .sildeTop .more .textBox {
  width: 100%;
}

.web main .slideBox .sildeCenter .sildeTop .more .textBox .title {
  font-size: 2.15vw;
}

.web main .slideBox .sildeCenter .sildeTop .more .textBox h5 {
  font-size: 2.71vw;
  font-weight: 400;
}

.web main .slideBox .sildeCenter .sildeTop .more .textBox .des {
  position: relative;
  width: 100%;
  height: 5vw;
  font-size: 1.25vw;
  color: #a1a1a1;
  margin: 1vw 0;
}

.web main .slideBox .sildeCenter .sildeTop .more .textBox .des p {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  transform: translateX(200%);
  opacity: 0;
}

.web main .slideBox .sildeCenter .sildeTop .more button {
  padding: 1.18vw 1.94vw;
  color: #fff;
  font-size: 1.25vw;
  border: none;
  border-radius: 4vw;
  background: linear-gradient(#14c3b5, #0d9f90);
  margin-top: 1vw;
  cursor: pointer;
}

.web main .slideBox .sildeCenter .silde {
  width: 17.99vw;
  height: 35.14vw;
  position: absolute;
  left: 48%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: url(../img/sj.png) no-repeat;
  background-size: 17.99vw 35.14vw;
  overflow: hidden;
}

.web main .slideBox .sildeCenter .silde .sildeBox {
  position: absolute;
  left: 51%;
  top: 49%;
  transform: translate(-50%, -50%);
  width: 14.93vw;
  height: 26.67vw;
  overflow: hidden;
}

.web main .slideBox .sildeCenter .silde .sildeBox .itemBox {
  width: 100%;
  height: 100%;
  font-size: 0;
  white-space: nowrap;
  transition: all .5s;
}

.web main .slideBox .sildeCenter .silde .sildeBox .itemBox .item {
  display: inline-block;
  width: 14.93vw;
  height: 26.67vw;
  overflow: hidden;
}

.web main .slideBox .sildeCenter .silde .sildeBox .itemBox .item img {
  width: 100%;
  height: 100%;
}

.web main .slideBox .sildeCenter .slideNav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 2vw;
  padding-right: 3vw;
}

.web main .slideBox .sildeCenter .slideNav .navLeft,
.web main .slideBox .sildeCenter .slideNav .navRight {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.web main .slideBox .sildeCenter .slideNav .navLeft li,
.web main .slideBox .sildeCenter .slideNav .navRight li {
  width: 7.22vw;
  height: 7.22vw;
  border-radius: 50%;
  border: 0.2vw solid #ccc;
  overflow: hidden;
  cursor: pointer;
  margin: 0.5vw;
  transition: border .5s;
}

.web main .slideBox .sildeCenter .slideNav .navLeft .active,
.web main .slideBox .sildeCenter .slideNav .navRight .active {
  border-color: red;
}

.web main .luckyDraw {
  width: 50.36vw;
  margin: 0 auto;
}

.web main .luckyDraw .luckyDrawTop {
  height: 3vw;
  background-color: #201a48;
  margin: 1.72vw 0;
  text-align: center;
  overflow: hidden;
}

.web main .luckyDraw .luckyDrawTop .silde {
  height: 3vw;
  display: inline-block;
  transition: all 0.5s;
}

.web main .luckyDraw .luckyDrawTop .silde .item {
  display: flex;
  align-items: center;
  height: 100%;
  color: #fff;
  font-size: 1.2vw;
}

.web main .luckyDraw .luckyDrawTop .silde .item i {
  color: #faaa27;
  font-size: 1vw;
  margin-right: 0.5vw;
}

.web main .luckyDraw .luckyDrawBottom {
  width: 50.36vw;
  display: flex;
  justify-content: space-between;
}

.web main .luckyDraw .luckyDrawBottom .rotaryTable {
  width: 34.22vw;
  height: 30.89vw;
  background-color: #201a48;
  display: flex;
  justify-content: center;
  align-items: center;
}

.web main .luckyDraw .luckyDrawBottom .rotaryTable .bigBoder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28.7vw;
  height: 28.7vw;
  border: 0.1vw solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.web main .luckyDraw .luckyDrawBottom .rotaryTable .bigBoder .middleBoder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26.35vw;
  height: 26.35vw;
  border-radius: 50%;
  border: 0.1vw solid rgba(255, 255, 255, 0.1);
}

.web main .luckyDraw .luckyDrawBottom .rotaryTable .bigBoder .middleBoder .smallBorder {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 23.33vw;
  height: 23.33vw;
  border: 0.23vw solid #fbb234;
  border-radius: 50%;
}

.web main .luckyDraw .luckyDrawBottom .rotaryTable .bigBoder .middleBoder .smallBorder .discBox {
  position: relative;
  width: 19.79vw;
  height: 19.79vw;
  border-radius: 50%;
  border: 0.21vw solid #fe8b36;
  background-color: #fed98d;
  overflow: hidden;
  box-shadow: 0px 0px 0.5vw #fe8b36, 0px 0px 0 0.78vw #ffdf8f;
}

.web main .luckyDraw .luckyDrawBottom .rotaryTable .bigBoder .middleBoder .smallBorder .discBox .item {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  border-top: 9.89vw solid #ffe3bc;
  border-left: 6.34vw solid transparent;
  border-right: 6.34vw solid transparent;
  transform-origin: bottom center;
}

.web main .luckyDraw .luckyDrawBottom .rotaryTable .bigBoder .middleBoder .smallBorder .discBox .item .text {
  position: absolute;
  left: 50%;
  top: -9.5vw;
  transform: translateX(-50%);
  font-size: 1.2vw;
  line-height: 1.5;
  text-align: center;
  color: #fe8b36;
}

.web main .luckyDraw .luckyDrawBottom .rotaryTable .bigBoder .middleBoder .smallBorder .discBox .item .text .imgBox {
  width: 3.23vw;
  height: 3.96vw;
  margin: 0 auto;
  overflow: hidden;
}

.web main .luckyDraw .luckyDrawBottom .rotaryTable .bigBoder .middleBoder .smallBorder .discBox .item .text p {
  white-space: nowrap;
}

.web main .luckyDraw .luckyDrawBottom .rotaryTable .bigBoder .middleBoder .smallBorder .discBox .item:nth-child(2n) {
  border-top-color: #fff;
}

.web main .luckyDraw .luckyDrawBottom .rotaryTable .bigBoder .middleBoder .smallBorder .luckyDrawBtnBorder {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6.61vw;
  height: 6.61vw;
  background-color: #fff;
  border-radius: 50%;
  border: 0.57vw solid #feba65;
}

.web main .luckyDraw .luckyDrawBottom .rotaryTable .bigBoder .middleBoder .smallBorder .luckyDrawBtnBorder .luckyDrawBtnSmallBorder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4.69vw;
  height: 4.69vw;
  border-radius: 50%;
  background-color: #df2209;
  border: 0.1vw solid #fea05a;
  text-align: center;
}

.web main .luckyDraw .luckyDrawBottom .rotaryTable .bigBoder .middleBoder .smallBorder .luckyDrawBtnBorder .luckyDrawBtnSmallBorder .luckyDrawBtn {
  display: flex;
  align-items: center;
  color: #fff6cc;
  font-size: 1.26vw;
  font-weight: 700;
  width: 4vw;
  height: 4vw;
  padding: 0 0.5vw;
  cursor: pointer;
  border-radius: 50%;
  background-color: #fe5251;
}

.web main .luckyDraw .luckyDrawBottom .rotaryTable .bigBoder .middleBoder .smallBorder .luckyDrawBtnBorder .luckyDrawBtnSmallBorder::after {
  content: "";
  display: block;
  position: absolute;
  top: -1vw;
  border-bottom: 1.6vw solid #df2209;
  border-left: 0.78vw solid transparent;
  border-right: 0.78vw solid transparent;
}

.web main .luckyDraw .luckyDrawBottom .results {
  width: 14.22vw;
  height: 30.89vw;
  background-color: #201a48;
  color: #fff;
  font-size: 0.8vw;
  text-align: center;
  padding-top: 1.3vw;
}

.web main .luckyDraw .luckyDrawBottom .results .prompt p {
  display: inline-block;
  padding: 0.57vw 0.52vw;
  background-color: #4e3eb4;
  border-radius: 0.96vw;
  margin: 0 0.63vw;
}

.web main .luckyDraw .luckyDrawBottom .results .prompt .LotteryNumber {
  color: #fbb234;
  margin: 0.3vw;
}

.web main .luckyDraw .luckyDrawBottom .results .prompt::before,
.web main .luckyDraw .luckyDrawBottom .results .prompt::after {
  content: "";
  display: inline-block;
  width: 0.36vw;
  height: 0.36vw;
  border-radius: 50%;
  background-color: #4e3eb4;
}

.web main .luckyDraw .luckyDrawBottom .results .resultsBox {
  padding: 1vw 0 0 1.15vw;
}

.web main .luckyDraw .luckyDrawBottom .results .resultsBox .title {
  width: 11.98vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #9785ff;
}

.web main .luckyDraw .luckyDrawBottom .results .resultsBox .title p {
  padding: 0.78vw 1.25vw;
}

.web main .luckyDraw .luckyDrawBottom .results .resultsBox .resultsNav {
  width: 100%;
  height: 23vw;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-shadow-color: #292256;
}

.web main .luckyDraw .luckyDrawBottom .results .resultsBox .resultsNav ul {
  width: 100%;
}

.web main .luckyDraw .luckyDrawBottom .results .resultsBox .resultsNav ul li {
  display: flex;
  justify-content: space-between;
  border-top: 0.1vw solid #1d1347;
  padding: 0.63vw 0;
}

.web main .luckyDraw .luckyDrawBottom .results .resultsBox .resultsNav ul li p:first-child {
  width: 7vw;
  flex: 0 0 auto;
}

.web main .luckyDraw .luckyDrawBottom .results .resultsBox .resultsNav ul li p:last-child {
  width: 3.5vw;
  flex: 0 0 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}

.web main .luckyDraw .luckyDrawBottom .results .resultsBox ::-webkit-scrollbar {
  width: 0.63vw;
}

.web main .luckyDraw .luckyDrawBottom .results .resultsBox ::-webkit-scrollbar-thumb {
  background-color: #292256;
}

.web main .rules {
  width: 50.36vw;
  margin: 0 auto;
  padding: 0 0.57vw;
  font-size: 1vw;
  margin-top: 3.59vw;
}

.web main .rules h3 {
  display: inline-block;
  font-size: 2 vw;
  letter-spacing: 0.07vw;
  color: transparent;
  background: linear-gradient(to top, #2780fa, #86eaff);
  background-clip: text;
  -webkit-background-clip: text;
}

.web main .rules ol {
  list-style: none;
  color: #b0aad5;
  padding-right: 2.24vw;
}

.web main .rules ol li {
  line-height: 2;
}

.web main .rules ol li span {
  color: #318bfa;
}

.web main .mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
}

.web main .mask .dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #f6eedb;
  font-size: 1.2vw;
  text-align: center;
  padding: 3vw;
  color: #000;
}

.web main .mask .dialog .prompt span {
  padding: 0 1vw;
}

.web main .mask .dialog .prompt::before,
.web main .mask .dialog .prompt::after {
  content: "";
  display: inline-block;
  width: 2vw;
  height: 0.1vw;
  background-color: #000;
  vertical-align: middle;
}

.web main .mask .dialog .shop {
  margin-top: 1vw;
  font-size: 1.5vw;
  color: #d80e0e;
}

.web main .mask .dialog .shop .imgBox {
  width: 8vw;
  height: 8vw;
  margin: 1vw auto;
}

.web main .mask .dialog button {
  color: #a44900;
  background: linear-gradient(#ffd86f, #faac2a);
  border: none;
  font-size: 1.2vw;
  padding: 1vw 5vw;
  border-radius: 0.5vw;
  cursor: pointer;
}

.web main .mask .dialog .close {
  position: absolute;
  right: 0.3vw;
  top: 0.3vw;
  display: inline-block;
  color: #000;
  font-size: 3vw;
  line-height: 1.5vw;
}

.web footer {
  width: 100%;
  background-color: #17171b;
  padding: 3.5vw;
}

.web footer .footerBox {
  width: 60vw;
  margin: 0 auto;
  font-size: 1vw;
  color: #5e5f65;
  display: flex;
  justify-content: space-between;
}

.web footer .footerBox .footerLeft {
  display: flex;
}

.web footer .footerBox .footerLeft dl {
  margin: 0 2vw;
}

.web footer .footerBox .footerLeft dl dt {
  font-size: 1.2vw;
  color: #fff;
  margin-bottom: 1vw;
}

.web footer .footerBox .footerLeft dl dd {
  line-height: 2.5vw;
}

.web footer .footerBox .footerRight {
  text-align: right;
}

.web footer .footerBox .footerRight .footerLogo {
  display: inline-block;
  width: 7vw;
  height: 2vw;
  overflow: hidden;
}

.web footer .footerBox .footerRight .nav {
  margin: 2vw 0;
}

.web footer .footerBox .footerRight .nav a {
  display: inline-block;
  width: 2.5vw;
  height: 2.5vw;
  line-height: 2.5vw;
  text-align: center;
  border: 0.1vw solid #5e5f65;
  color: #5e5f65;
  border-radius: 50%;
  margin: 0 0.5vw;
}

.web footer .footerBox .footerRight .nav a i {
  font-size: 1.5vw;
}

.web footer .footerBox .footerRight p {
  font-size: 0.8vw;
}

.scaleOut {
  animation: scaleOut 2s forwards;
}

.scaleIn {
  animation: scaleIn 2s forwards;
}

.leftOut {
  animation: leftOut 2s forwards;
}

.leftIn {
  animation: leftIn 2s forwards;
}

@keyframes scaleOut {
  0% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
  40% {
    transform: translateX(-50%) scale(0.7) rotate(-90deg);
    opacity: 1;
  }
  60% {
    transform: translate(-50%, 200px) scale(0.5) rotate(-90deg);
    opacity: .5;
  }
  100% {
    transform: translate(-50%, 200px) scale(0);
    opacity: 0;
  }
}

@keyframes scaleIn {
  0% {
    transform: translateX(-50%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translateX(-50%) scale(1.5);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
}

@keyframes leftOut {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(100vw, -30vw);
    opacity: 0;
  }
}

@keyframes leftIn {
  0% {
    transform: translate(100vw, -30vw);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
